cc.Class({
    extends: cc.Component,

    properties: {
        chatManager: cc.Node,
        brush: cc.Node,
        ServerModule: cc.Node,
        widthSlider: cc.Node,
        colorLayout: cc.Node,
        toolLayout: cc.Node,
    },

    onLoad() {
     
    },

    start() {
        this.drawInfo = {
            "lineWidth": 5,
            "color": "BLACK",
            "x0": 0,
            "y0": 0,
            "x1": 0,
            "y1": 0,
        }

        this.node.on('touchstart', this.onTouchStart, this);
        this.node.on('touchmove', this.onTouchMove, this);

        this.drawInfo.lineWidth = 5
        this.registerDrawEvent()
    },

    registerDrawEvent() {
        if(this.brush == null){
            return
        }
        console.log("registerDrawEvent")
        // // 初始化连接
        // let url = cfg.SERVER_HOST + ":" + cfg.SERVER_PORT
        // this.ServerModule.getComponent('ServerModule').initServerModule(url)

        // 监听绘画事件
        this.ServerModule.getComponent('ServerModule').registerOnTouchMove(this.brush)
        // 监听清除画板事件
        this.ServerModule.getComponent('ServerModule').registerOnClearDraw(this.brush)
    },

    onTouchStart(event) {
        // 设置笔刷起始位置
        let pos = this.node.convertToNodeSpaceAR(event.getLocation());
        this.drawInfo.x0 = pos.x
        this.drawInfo.y0 = pos.y
    },

    onTouchMove(event) {
        if (this.brush == null || this.ServerModule == null) {
            return
        }
        let pos = this.node.convertToNodeSpaceAR(event.getLocation());
        // this.brush.getComponent('Brush').drawTo(pos.x, pos.y);
        // console.log("getLocationX:", event.getLocationX(), "getLocationY:", event.getLocationY())
        // console.log("pos.x:", pos.x, "gpos.y:", pos.y)

        this.drawInfo.x1 = pos.x
        this.drawInfo.y1 = pos.y

        this.brush.getComponent('Brush').doDraw(this.drawInfo.x0, this.drawInfo.y0, this.drawInfo.x1, this.drawInfo.y1, this.drawInfo.color, this.drawInfo.lineWidth);
        this.ServerModule.getComponent('ServerModule').sendOnTouchMoveEvent(this.drawInfo)

        // 更新起始位置
        this.drawInfo.x0 = this.drawInfo.x1
        this.drawInfo.y0 = this.drawInfo.y1
    },

    // convertDrawInfoToSend(info) {
    //     let drawInfo = {
    //         "lineWidth": info.lineWidth,
    //         "color": info.color,
    //         "x0": info.x0 / cc.winSize.width,
    //         "y0": info.y0 / cc.winSize.height,
    //         "x1": info.x1 / cc.winSize.width,
    //         "y1": info.y1 / cc.winSize.height,
    //     }
    //     return drawInfo
    // },
    // convertDrawInfoFromReceived(info) {
    //     let drawInfo = {
    //         "lineWidth": info.lineWidth,
    //         "color": info.color,
    //         "x0": info.x0 * cc.winSize.width,
    //         "y0": info.y0 * cc.winSize.height,
    //         "x1": info.x1 * cc.winSize.width,
    //         "y1": info.y1 * cc.winSize.height,
    //     }
    //     return drawInfo
    // },

    sliderEvent(slider) {
        this.drawInfo.lineWidth = 5 + slider.progress * 10;
    },

    blackBtnEvent() {
        this.drawInfo.color = "BLACK";
    },

    redBtnEvent() {
        this.drawInfo.color = "RED";
    },

    greenBtnEvent() {
        this.drawInfo.color = "GREEN";
    },

    blueBtnEvent() {
        this.drawInfo.color = "BLUE";
    },

    yellowBtnEvent() {
        this.drawInfo.color = "YELLOW";
    },

    purpleBtnEvent() {
        this.drawInfo.color = "PURPLE";
    },

    brushBtnEvent() {
        this.drawInfo.color = "BLACK";
    },

    eraserBtnEvent() {
        this.drawInfo.color = "WHITE";
    },

    clearBtnEvent() {

        this.brush.getComponent('Brush').clearDraw();
        this.ServerModule.getComponent('ServerModule').sendClearDrawEvent()
        // this.chatManager.getComponent('ChatManager').test();
    }
});
